// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;

// Security impact levels

.level-item {
    padding: 0.714rem 0 0.5rem;
    position: relative;
}

.level {
    @include text-body-xs;
    background: $color-marketing-gray-10;
    border-right: 3px solid $color-marketing-gray-30;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 -1px 0 rgba(0, 0, 0, 0.05) inset;
    color: #000;
    display: inline-block;
    font-style: normal;
    font-weight: bold;
    line-height: 1;
    padding: 4px;
    min-width: 90px;

    &.moderate {
        background: $color-yellow-10;
        border-color: $color-yellow-40;
    }

    &.high {
        background: $color-orange-10;
        border-color: $color-orange-50;
    }

    &.critical {
        background: $color-red-10;
        border-color: $color-red-50;
    }
}

// move levels to the left once there's enough space
@media #{$mq-sm} {
    .level-item {
        padding-left: 110px;

        .level {
            left: 0;
            position: absolute;
            top: 1rem;
        }
    }
}

// linkable headings in product advisories
.level-heading {
    position: relative;

    a {
        color: inherit;
        text-decoration: none;

        &:hover,
        &:focus,
        &:active {
            .anchor {
                color: $color-link;
            }
        }
    }

    .anchor {
        position: absolute;
        left: -1em;
        width: 1em;
        color: $color-marketing-gray-40;
        vertical-align: middle;
    }
}
